<template>
	<el-form
		style="width: 95%"
		:model="ruleForm"
		:rules="rules"
		ref="ruleForm"
		label-width="100px"
		class="demo-ruleForm"
	>
		<el-form-item label="量表编号" prop="file_id">
			<el-input
				maxlength="12"
				@blur="is_exist"
				v-model="ruleForm.file_id"
			></el-input>
		</el-form-item>
		<el-form-item label="调查地区" prop="survey_area">
			<el-radio v-model="ruleForm.survey_area" label="武汉">武汉</el-radio>
			<el-radio v-model="ruleForm.survey_area" label="大悟">大悟</el-radio>
		</el-form-item>
		<el-form-item label="受访者姓名" prop="interviewee">
			<el-input v-model="ruleForm.interviewee"></el-input>
		</el-form-item>
		<el-form-item label="身份证号码" prop="id_num">
			<el-input
				oninput="value=value.replace(/[^\dX]/g, '')"
				maxlength="18"
				v-model="ruleForm.id_num"
			></el-input>
		</el-form-item>
		<el-form-item label="家庭住址" prop="address">
			<el-input v-model="ruleForm.address"></el-input>
		</el-form-item>
		<el-form-item label="民族" prop="nation">
			<el-input v-model="ruleForm.nation"></el-input>
		</el-form-item>
		<el-form-item label="研究者姓名" prop="researcher">
			<el-input v-model="ruleForm.researcher"></el-input>
		</el-form-item>
		<el-form-item label="开始日期" prop="date">
			<div class="edp1">
				<el-date-picker
					v-model="ruleForm.date"
					type="date"
					style="width: 100%"
					placeholder="选择日期"
				>
				</el-date-picker>
			</div>
		</el-form-item>
		<el-form-item label="联系方式" prop="phone">
			<el-input
				oninput="value=value.replace(/[^\d]/g, '')"
				maxlength="11"
				v-model="ruleForm.phone"
			></el-input>
		</el-form-item>
		<el-form-item label="备注" prop="remarks">
			<el-input v-model="ruleForm.remarks"></el-input>
		</el-form-item>

		<tr>
			<!-- <el-form-item> -->
			<el-button type="primary" @click="submitForm('ruleForm')"
				>立即创建</el-button
			>
			<el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
		</tr>
	</el-form>
</template>

<script>
import baseUrl from "../../utils/baseURL";
	export default {
		data() {
			return {
				ruleForm: {
					file_id: "",
					survey_area: "",
					interviewee: "",
					id_num: "",
					address: "",
					nation: "",
					researcher: "",
					date: "",
					phone: "",
					remarks: "",
					username: "",
				},
				rules: {
						file_id: [{ required: true, message: "请输入档案编号", trigger: "blur" },],
						// survey_area:[{required: true, message: "必填", trigger: "blur"}],
						interviewee:[{required: true, message: "必填", trigger: "blur"}],
						// id_num:[
						// 	{required: true, message: "必填", trigger: "blur"},
						// 	{ min: 18, message: '请输入18位身份证号码', trigger: 'blur' }
						// ],
						address:[{required: true, message: "必填", trigger: "blur"}],
						// nation:[{required: true, message: "必填", trigger: "blur"}],
						researcher:[{required: true, message: "必填", trigger: "blur"}],
						date:[{required: true, message: "必选", trigger: "change"}],
					  phone:[{required: true, message: "必填", trigger: "blur"}],
				},
			};
		},
		methods: {
			submitForm(formName) {
				const _this = this;
				let userData = JSON.parse(window.localStorage.getItem("userData"));
				_this.ruleForm.username = userData.username;
				_this.$refs[formName].validate((valid) => {
					if (valid) {
						axios
							.post(baseUrl+"/fileInfo/insertFileInfo", _this.ruleForm)
							.then(function (resp) {
								console.log(resp);
								_this.$alert("添加成功", "标题名称", {
									confirmButtonText: "确定",
									callback: (action) => {
										_this.$router.push({
											name: "/UpdateFile",
											params: {
												file_id: _this.ruleForm.file_id,
											},
										});
									},
								});
							});
					}
				});
			},
			is_exist() {
				const _this = this;
				axios
					.post(baseUrl+"/fileInfo/selectFileInfoByFileId", {
						file_id: _this.ruleForm.file_id,
					})
					.then(function (resp) {
						if (resp.data.data!=null) {
							_this.$message({
								message: "量表编号重复，请重新输入！",
								type: "warning",
							});
							_this.ruleForm.file_id = "";
						}
					});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		},
	};
</script>

<style scoped>
	.demo-ruleForm /deep/ {
		margin-top: 10px;
		margin-left: 5px;
		margin-right: 10px;
	}
	.demo-ruleForm /deep/ .el-radio__input.is-checked .el-radio__inner {
		background-color: #719ac3;
		border: 1px solid #719ac3;
		color: #719ac3;
	}
	.demo-ruleForm /deep/ .el-input {
		max-width: 400px;
	}
	.edp1 {
		max-width: 400px;
	}
	.demo-ruleForm /deep/ .el-radio__input .el-radio__inner:hover {
		border: 1px solid #719ac3;
	}
	.demo-ruleForm /deep/ .el-radio__input.is-checked + .el-radio__label {
		color: #719ac3;
	}
	.el-button {
		margin-left: 50px;
		margin-bottom: 20px;
		background-color: #719ac3;
		border: 2px solid #719ac3;
	}
	.el-button:hover {
		background-color: #84b2dd;
		border: 2px solid #84b2dd;
	}
</style>